<template>
  <div id="worldmap">
    <div id="mapChart"></div>
  </div>
</template>
<script setup lang="ts">
// import * as echarts from "echarts";
import { onMounted, ref, inject } from "vue";
import "./js/china";
import "./js/world";
const echarts = inject("echartsGodz");

let mapCharts = ref();
onMounted(() => {
  mapCharts.value = echarts.init(
    document.querySelector("#mapChart") as HTMLElement
  );

  mapCharts.value.setOption({
    geo: {
      show: true,
      map: "world",
      roam: false,
      itemStyle: {
        normal: {
          //地图背景颜色
          areaColor: {
            type: "linear-gradient",
            x: 0,
            y: 900,
            x2: 300,
            y2: 0,
            colorStops: [
              {
                offset: 0.5,
                color: "#AAAAAA", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#DDDDDD", // 100% 处的颜色B3F6F0
              },
            ],
            global: true, // 缺省为 false
          },
          borderColor: "#DDDDDD",
        },
        emphasis: {
          areaColor: "#4499d0",
        },
      },
      layoutCenter: ["50%", "50%"],
      // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
      layoutSize: 350,
    },
    series: [
      {
        name: "散点",
        type: "scatter",
        coordinateSystem: "geo",
      },
    ],
  });
});
</script>
<style lang="less" scoped>
#worldmap {
  width: 100%;
  height: 100%;
  #mapChart {
    width: 100%;
    height: 100%;
  }
}
</style>
